@import url("../css/const.css");

body.dark {
  div#interface {
    color: var(--dark-mode-font-color);
    button.current {
      border: 2px solid var(--dark-mode-border-color);
    }
    div {
      #map-title {
        color: var(--dark-mode-font-color);
        text-shadow: 1px 1px var(--dark-mode-background-color),
          -1px -1px var(--dark-mode-background-color),
          1px -1px var(--dark-mode-background-color),
          -1px 1px var(--dark-mode-background-color);
      }
      #layer-control {
        background-color: var(--dark-mode-background-color);
        border: 1px solid var(--dark-mode-border-color);
        div button {
          background-color: var(--dark-mode-font-color);
        }
      }
      #control button {
        &#language-control {
          background-image: url("../resources/translate_white.png");
        }
        &#theme-control {
          &.dark {
            background-image: url("../resources/dark_mode.png");
          }
          &.light {
            background-image: url("../resources/light_mode.png");
          }
        }
      }
      #risk-information {
        background-image: url("../resources/info_white.png");
        #risk-explanation {
          background-color: var(--dark-mode-background-color);
          border: 1px solid var(--dark-mode-border-color);
        }
      }
      &#legend {
        background-color: var(--dark-mode-background-color);
        border: 1px solid var(--dark-mode-border-color);
        div.legend-classes div#symbol div {
          border: 1px solid var(--dark-mode-font-color);
        }
      }
      &#metadata button {
        background-color: var(--dark-mode-font-color);
      }
      &.subframe {
        background-color: var(--dark-mode-background-color);
        border: 1px solid var(--dark-mode-border-color);
      }
    }
  }
  div.leaflet-popup-content-wrapper {
    border: 1px solid var(--dark-mode-border-color);
    color: var(--dark-mode-font-color);
    background-color: var(--dark-mode-background-color);
    div.leaflet-popup-content {
      div#detailed {
        background-image: url("../resources/info_white.png");
        div.explanation {
          background-color: var(--dark-mode-background-color);
          border: 1px solid var(--dark-mode-border-color);
        }
      }
      div.score-bar div.class-1 #value-pointer #pointer {
        background-image: url("../resources/value_pointer_white.png");
      }
    }
  }
  div.leaflet-control-container div.leaflet-control-search {
    border: 1px solid var(--dark-mode-border-color);
    background-color: var(--dark-mode-background-color);
    input {
      background-color: var(--dark-mode-background-color);
      color: var(--dark-mode-font-color);
      &::placeholder {
        color: var(--dark-mode-font-color);
      }
    }
    a.search-button {
      background-color: var(--dark-mode-background-color);
      background-image: url("../resources/search_white.png");
    }
    ul li.search-tip {
      background-color: var(--dark-mode-background-color);
      color: var(--dark-mode-font-color);
    }
  }
  div.leaflet-tooltip {
    background-color: var(--dark-mode-background-color);
    border: 1px solid var(--dark-mode-border-color);
    color: var(--dark-mode-font-color);
  }
}